<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:用户中心首页
@author:成都市一颗优雅草科技有限公司     
@version V5.x 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   企业客服QQ:2853810243  官方客户·技术交流群 929353806交流群 929353806
 -->
<template>
  <view
    class="body"
    @touchstart="refreshStart"
    @touchmove="refreshMove"
    @touchend="refreshEnd"
  >
    <refresh ref="refresh" @isRefresh="isRefresh"></refresh>
    

    <view
      scroll-y="true"
      class="scroll-view"
      
    >
	  <!-- <scroll-view
      scroll-y="true"
      class="scroll-view"
      :style="{ height: `${windowHeight - 120}px` }"
    > -->
      <view class="container">
        <view class="beijing"></view>
        <view class="content width">
			<view class="status_bar"></view>
			<view class="content-set center ju-en" @tap="tabSetting">
				<image src="/static/img/setting.png" class="content-set-img"></image>
			</view>
			<view class="content-info flex">
				
				<image src="https://img2.baidu.com/it/u=2090606195,1473750087&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" class="content-info-portrait"></image>
				<view class="content-info-desc">
					<view class="center">
						<text class="content-info-name">一只胖哒</text>
						<text class="content-info-grade">LV.6</text>
					</view>
					<view class="center content-location ju-st">
						<image src="/static/img/location.png" class="content-info-location-img"></image>
						<text class="content-info-location">上海市</text>
					</view>
					
					<view class="content-info-times"> 剩余次数8/10</view>
				</view>
			</view>
			
			<view class="content-num">
				<view class="content-num-item center">
					<text class="content-num-item-times">10</text>
					<text class="content-num-item-desc">粉丝</text>
				</view>
				<view class="content-num-item center">
					<text class="content-num-item-times">8</text>
					<text class="content-num-item-desc">关注</text>
				</view>
				<view class="content-num-item center">
					<text class="content-num-item-times">2</text>
					<text class="content-num-item-desc">获赞</text>
				</view>
				<view class="content-num-item center">
					<text class="content-num-item-times">2</text>
					<text class="content-num-item-desc">金币</text>
				</view>
			</view>
		</view>
	  <view class="navigation1">
			  <navigator text="月落" class="navigation1-item">
				  <u--image class='mr-4' :showLoading="true" src="/static/img/photo.png" width="56rpx" height="56rpx" ></u--image>
				  <view class="algin-fs  flex column">
					  <view class="navigation1-item-title">相册</view>
					  <view class="navigation1-item-desc center">
						  <text class="mr-3">查看照片</text>
						   <u--image  :showLoading="true" src="/static/img/letterMore.png" width="26rpx" height="26rpx" ></u--image>
					  </view>
				  </view>
			  </navigator>
			  <navigator text="月落" class="navigation1-item">
				  <u--image class='mr-4' :showLoading="true" src="/static/img/tiezi.png" width="56rpx" height="56rpx" ></u--image>
				  <view class="algin-fs  flex column">
					  <view class="navigation1-item-title">发帖</view>
					  <view class="navigation1-item-desc center">
						  <text class="mr-3">发布帖子</text>
						   <u--image  :showLoading="true" src="/static/img/letterMore.png" width="26rpx" height="26rpx" ></u--image>
					  </view>
				  </view>
			  </navigator>
		</view>
    <view class="navigation2">
      <view class="navigation2-item center">
         <view class="navigation2-item-img">
           <u--image :showLoading="true" src="/static/img/shareuser.png" width="80rpx" height="80rpx" ></u--image>
         </view>
         <view class="mt-4 f-24">分享邀请</view>
      </view>
      <view class="navigation2-item center">
         <view class="navigation2-item-img">
           <u--image :showLoading="true" src="/static/img/idcard.png" width="80rpx" height="80rpx" ></u--image>
         </view>
         <view class="mt-4 f-24">身份卡</view>
      </view>
      <view class="navigation2-item center">
         <view class="navigation2-item-img">
           <u--image :showLoading="true" src="/static/img/vip.png" width="80rpx" height="80rpx" ></u--image>
         </view>
         <view class="mt-4 f-24">VIP充值</view>
      </view>
      <view class="navigation2-item center">
         <view class="navigation2-item-img">
           <u--image :showLoading="true" src="/static/img/wall.png" width="80rpx" height="80rpx" ></u--image>
         </view>
         <view class="mt-4 f-24">我的钱包</view>
      </view>
      <view class="navigation2-item center">
         <view class="navigation2-item-img">
           <u--image :showLoading="true" src="/static/img/prox.png" width="80rpx" height="80rpx" ></u--image>
         </view>
         <view class="mt-4 f-24">代理赚钱</view>
      </view>
    </view>
    <view>
    <view class="tabs center">
       <u-tabs :list="tabList" itemStyle="padding-left: 20px; padding-right: 20px;height:44px" lineColor="#000"   :activeStyle="{fontWeight: '500',}" :inactiveStyle="{color: '#999'}"></u-tabs>
     </view>
     <view>
         <message></message>
     </view>
    </view>
     
  </view>
	 
  </view>
    <view class="user-foot"></view>
  </view>
</template>

<script>
// const modal = weex.requireModule("modal");
import { mapState, mapMutations } from "vuex";
import refresh from "@/components/refresh/refresh.vue";
import videoPage from "@/components/video/video-page.vue";
import message from "@/components/message/index.vue";

export default {
  components: {
    videoPage,
    refresh,message
  },
  data() {
    return {
      tabList:[
        {name:"作品2"},
        {name:"喜欢0"},
        {name:"已购买0"}
      ],
      windowHeight: 0,
      height: "667px",
      width: "",
      is_active: false,
      videoData: {
        type: "user",
        data: [],
        page: 1,
        isMore: true,
      },
    };
  },
  created() {
	  return;
    this.windowHeight = uni.getSystemInfoSync().windowHeight;
	
    this.$nextTick(() => {
      setTimeout(() => {
        if (this.isVip()) {
          this.is_active = true;
        }
      }, 500);
    });
  },
  onShow() {
	  return;
    this.getInfo();
  },
  methods: {
    ...mapMutations(["IMlogin", "IMlogout"]),
    CardSecretExchange() {
      modal.prompt(
        {
          message: "请输入卡密进行兑换",
          okTitle: "立即兑换",
          cancelTitle: "取消",
        },
        ({ result, data }) => {
          if (result === "立即兑换") {
            this.$api.CardSecretExchange({ code: data }).then((res) => {
              uni.showToast({
                title: res.data.msg,
                icon: "none",
              });
            });
          }
        }
      );
    },
    isVip() {
      return this.user && this.user.is_vip;
    },
    tapItem(index) {
      switch (index) {
        case 0: //我的作品
          uni.navigateTo({
            url: "/pages/index/user/subItem/create",
          });
          break;
        case 1: // 我喜欢的
          uni.navigateTo({
            url: "/pages/index/user/like-video/like-video",
          });
          break;
        case 2: // 我的下载
          uni.navigateTo({
            url: "/pages/index/download/download",
          });
          break;
        case 4: //金币提现
          uni.navigateTo({
            url: "/pages/index/user/withdraw",
          });
          break;
        case 5: //金币提现
          uni.navigateTo({
            url: "/pages/index/user/change",
          });
          break;
        case 7: //推广记录
          uni.navigateTo({
            url: "/pages/index/user/inviterecord",
          });
          break;
        case 8: //金币提现
          uni.navigateTo({
            url: "/pages/setting/account",
          });
          break;
        case 9: //我的收藏
          uni.navigateTo({
            url: "/pages/index/user/collection/collection",
          });
          break;
        case 10: //我的聊天
          uni.navigateTo({
            url: "/pages/im-chat/im-list",
          });
          break;
        case 11: //访问h5
          uni.navigateTo({
            url: "/pages/im-chat/im-list",
          });
          break;
        case 12: //访问答题记录
          uni.navigateTo({
            url: "/pages/index/user/subject/record",
          });
          break;
        case 13: //我的推广
          uni.navigateTo({
            url: "/pages/index/user/invite/invite",
          });
          break;
        case 14: //我的帖子
          uni.navigateTo({
            url: "/pages/index/user/subItem/textimage",
          });
          break;
      }
    },
    h5() {
      plus.runtime.openURL("https://videoh5.youyacao.com/");
    },
    refreshStart(e) {
      this.$refs.refresh.refreshStart(e);
    },
    refreshMove(e) {
      this.$refs.refresh.refreshMove(e);
    },
    refreshEnd(e) {
      this.$refs.refresh.refreshEnd(e);
    },
    //刷新名需写为isRefresh,刷新组件中会回调此事件
    isRefresh() {
      this.refresh();
    },
    //格式化链接地址
    formatUrl(url1) {
      return url1 && this.$utils.formatUrl(this, url1);
    },
    tabVip() {
      uni.navigateTo({
        url: "/pages/index/user/vip",
      });
    },
    tabIntegral() {
      uni.navigateTo({
        url: "/pages/index/user/integral",
      });
    },
    tabSetting() {
      uni.navigateTo({
        url: "/pages/setting/index",
      });
    },
    tapAvater() {
      if (this.user == null) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return;
      }
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          console.log(tempFilePaths[0]);
          uni.uploadFile({
            url: this.$store.state.baseUrl + "/api/api/upload", //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: "file",
            formData: {
              type: "img",
            },
            success: (res) => {
              if (res.statusCode != 200) {
                uni.showToast({
                  title: "网络错误",
                  icon: "none",
                });
                return;
              }
              var data = JSON.parse(res.data);
              if (data.code == 1) {
                uni.showToast({
                  title: data.msg,
                  icon: "none",
                });
                return;
              }
              //调用更新用户信息接口
              this.$api
                .userUpdate({
                  head_img: data.data.url,
                })
                .then((res1) => {
                  if (res1.data.code == 1) {
                    uni.showToast({
                      title: res1.data.msg,
                      icon: "none",
                    });
                    return;
                  }
                  uni.showToast({
                    title: "修改头像成功",
                  });
                  this.$store.dispatch("getUserInfo");
                });
            },
          });
        },
      });
    },
    tapUser() {
      if (this.user == null) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return;
      }
    },
    toFans() {
      if (this.user == null) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/index/user/follow?type=fans",
      });
    },
    toFollow() {
      if (this.user == null) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/index/user/follow?type=follow",
      });
    },
    toShare() {
      uni.navigateTo({
        url: "/pages/index/user/inviterecord",
      });
    },
    getInfo() {
      if (this.user == null) {
        return;
      }
      //获取用户信息
      this.$store.dispatch("getUserInfo");
      this.IMlogin(this.user.phone);
    },
    refresh() {
      this.getInfo();
      this.$refs.refresh.endAfter();
    },
  },
  computed: {
    user() {
      return this.$store.state.user || null;
    },
  },
};
</script>

<style lang="scss">
.body{
	background: #fff;
}
.user-foot {
  flex: 1;
  background-color: #000000;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  position: relative;
  //利用flex布局让内容content模块垂直居中
  display: flex;
  flex-direction: column;
  position: relative;
}
.beijing {
  //背景图样式
  width: 100%;
  height: 440rpx;
  position: relative;
  left: 0px;
  top: 0px;
  background: url("https://img2.baidu.com/it/u=2090606195,1473750087&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500");
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);
}
.content {
	position: absolute;
	height: 440rpx;
  //内容图样式
  color: #fff;
  z-index: 5;
  box-sizing: border-box;
  &-location{
	  margin: 8rpx 0;
  }
  &-set{
	  height: 88rpx;padding: 0 32rpx;
	  &-img{
		  width: 44rpx;height: 44rpx;
		  margin-bottom: 22rpx;
	  }
  }
  &-info{
	  padding: 0 32rpx;
	  &-portrait{
		  width: 120rpx;height: 120rpx;border-radius: 50%;
		   margin-right: 20rpx;
	  }
	  &-name{
		  	font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
	  }
	  &-grade{
		  	font-size: 22rpx;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        border-radius: 20px;
        background: #fff;
        color: #000;
        padding: 0rpx 6rpx;margin-left: 8rpx;
	  }
	 &-location{
	  	font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;margin-left: 4rpx;
		&-img{
			width: 18rpx;height: 22rpx;
		}
		
  	}
	&-times{
		border-radius: 19px;
		font-size: 22rpx;
		font-weight: 400;
		line-height: 30rpx;
		padding: 6rpx 0;
		color: #fff;
		background-color:rgba(255,255,255,.1) ;
		text-align: center;
	}
  }
  &-num{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  width:100%;
	  box-sizing: border-box;
	  position: absolute;
	  bottom: 44rpx;
	  padding: 0 48rpx;
	  &-item{
		  	&-times{
			  	font-size: 40rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
			}
			&-desc{
				font-size: 26rpx;margin-left: 16rpx;
			}
	  }
  }
 
}
.navigation1{
	padding: 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	&-item{
		height: 128rpx;
		border-radius: 16rpx;
    border: 1px solid #E6E6E6;
		width: 46%;
		display: flex;justify-content: flex-start;
    align-items: center;
    padding-left: 32rpx;
    box-sizing: border-box;
		&-title{
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #222222;
		}
		&-desc{
			font-size: 26rpx;
			color: #999;
			
		}
	}

}
.navigation2{
  padding: 32rpx;
  padding-top:24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  color: #222222;
  &-item{
    flex-direction: column;
    &-img{
      width: 80rpx;height: 80rpx;
      border: 1px #E6E6E6 dashed;
    }
  }
}
.tabs{
  height: 88rpx;margin-top: 24rpx;
  background: #FFFFFF;
  box-shadow: inset 0px -1px 0px 0px rgba(230,230,230,1);
}
</style>
